<template>
    <div>
        <div v-if="bigEditPopShow">
            {{msgInputHtml}}
            <div style="width: 100%;padding: 10px;">
                <q-editor
                        v-model="message"
                        @keyup.enter="onSendTextMsgEnter"
                        @paste.native="evt => pasteCapture(evt)"
                        flat
                        placeholder="输入信息..."
                        ref="edit"
                        content-class="bg-white editPop"
                        toolbar-text-color="white"
                        toolbar-toggle-color="red"
                        toolbar-bg="green"
                        :definitions="{
                                    emoji: {
                                      tip: '表情',
                                      icon: 'insert_emoticon',
                                      label: '',
                                      handler: showEmoji
                                    },
                                    closeIt: {
                                      tip: 'close',
                                      icon: 'close',
                                      label: '',
                                      handler: showEditPop
                                    }
                                  }"
                        :toolbar="[
                                        ['left', 'center', 'right', 'justify','undo', 'redo'],
                                        ['bold', 'italic', 'underline'],
                                        [{
                                          label: $q.lang.editor.formatting,
                                          icon: $q.iconSet.editor.formatting,
                                          list: 'no-icons',
                                          options: ['p',  'code']
                                        }],
                                         ['viewsource','closeIt']
                                      ]"
                >
                    <form
                            autocorrect="off"
                            autocapitalize="off"
                            autocomplete="off"
                            spellcheck="false"
                    />
                </q-editor>
            </div>
        </div>

        <div class="footDiv">
            <div class="bg-white textDiv">

                <q-toolbar>
                    <ChatEmoji ref="emojiBox" :inp-message="message" @selectEmoji="selectEmoji"/>

                    <div
                            ref="msgInput"
                            clearable
                            contenteditable
                            class="im-MsgInput"
                            v-html="msgInputHtml"
                            @input="changeText"
                            placeholder="Enter发送/Shift+Enter换行..."
                            v-on:keydown.enter="onSendTextMsgEnter($event)"
                            v-if="!bigEditPopShow"
                    />
                    <div v-else contenteditable="false" ref="msgInput" class="im-MsgInput"/>
                    <q-btn round flat icon="alternate_email" size="10px" @click="shwoMemberDialog = true"/>
                    <q-btn round flat icon="add_circle_outline" size="10px">
                        <q-menu auto-close :offset="[-20, 10]">
                            <q-list style="min-width: 100px">
                                <q-item clickable @click="onPickFile">
                                    <q-item-section side>
                                        <q-icon name="insert_photo"/>
                                    </q-item-section>
                                    <q-item-section>图片</q-item-section>
                                </q-item>
                                <q-item clickable @click="showUploadFile">
                                    <q-item-section side>
                                        <q-icon name="folder"/>
                                    </q-item-section>
                                    <q-item-section>文件/视频</q-item-section>
                                </q-item>

                            </q-list>
                        </q-menu>
                    </q-btn>
                    <q-btn round flat icon="mic" size="10px" @click="_recorder"/>
                    <q-btn round flat :icon="bigEditPopShow?'fullscreen_exit':'fullscreen'" size="10px" @click="showEditPop()"/>
                    <q-btn
                            round
                            flat
                            icon="send"
                            size="12px"
                            style="background: #3db16b; color: white"
                            @click="onSendTextMsg"
                    />
                </q-toolbar>
            </div>
        </div>
        <q-dialog flat v-model="uploadFileDialog" :persistent="uploadFilePersistent">
            <!--                <div class="q-pa-md">-->
            <div flat>
                <q-uploader
                        fieldName="file"
                        flat
                        :url="filePath"
                        :accept="uploadFileOrImg === 'img'?'image/*':''"
                        no-thumbnailsgreen
                        color="green"
                        :filter="_checkFile"
                        multiple
                        batch
                        style="max-width: 40vw;min-width: 50vh"
                        @uploaded="_sendFileOver"
                >
                    <template v-slot:header="scope">
                        <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
                            <q-btn v-if="scope.queuedFiles.length > 0" icon="clear_all" @click="scope.removeQueuedFiles" round dense
                                   flat>
                                <q-tooltip>清空</q-tooltip>
                            </q-btn>
                            <q-btn v-if="scope.uploadedFiles.length > 0" icon="done_all" @click="scope.removeUploadedFiles" round dense
                                   flat>
                                <q-tooltip>移除已经上传了的文件</q-tooltip>
                            </q-btn>
                            <q-spinner v-if="scope.isUploading" class="q-uploader__spinner"/>
                            <div class="col">
                                <div class="q-uploader__title">发送{{uploadFileOrImg === 'img'?'图片':'文件'}} (最大1M)</div>
                                <div class="q-uploader__subtitle">{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}</div>
                            </div>
                            <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" round dense flat>
                                <q-uploader-add-trigger/>
                                <q-tooltip>选择{{uploadFileOrImg === 'img'?'图片':'文件'}}</q-tooltip>
                            </q-btn>
                            <q-btn v-if="scope.canUpload" @click="scope.upload" round dense flat>
                                发送
                            </q-btn>

                            <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" round dense flat size="12px"
                                   style="background: #3db16b; color: white">
                                <q-tooltip>移除</q-tooltip>
                            </q-btn>
                        </div>
                    </template>
                </q-uploader>
            </div>
        </q-dialog>
        <q-dialog v-model="shwoMemberDialog">
            <q-card>
                <q-toolbar>
                    <q-toolbar-title><span class="text-weight-bold"> <q-icon name="alternate_email"/> 群组成员</span></q-toolbar-title>
                    <q-btn flat round dense icon="close" v-close-popup/>
                </q-toolbar>
                <GroupMemberList :groupInfo="groupInfo" @atMember="atMember" @atMemberAll="atMemberAll"/>
            </q-card>
        </q-dialog>
    </div>
</template>

<script>
  import JIM from "../../utils/JIM";
  import ChatEmoji from '../../components/chatEmoji/index.vue'
  import GroupMemberList from '../../components/list/group/groupMembers'
  import BenderConfig from "../../sdk/config";
  import Recorder from '../audioRecorder/index'
  import ImStorage from "../../sdk/utils/ImStorage";

  export default {
    name: "editInput",
    components: {ChatEmoji, GroupMemberList},
    props: {},
    data () {
      return {
        filePath: BenderConfig.uploadPath,
        bigEditPopShow: false,
        uploadFileDialog: false,
        uploadFileOrImg: 'img',//file img
        shwoMemberDialog: false,
        uploadFilePersistent: false,//有文件时 不允许直接关闭
        message: '',
        msgInputHtml: '',
        msgTemplate: {},
        groupInfo: {
          id: 1,
          img: 'https://cdn.quasar.dev/img/avatar.png',
          bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
          title: 'J-IM 朋友圈',
          groupNum: '213213213',
          remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
          tags: [
            {
              id: 1,
              name: '互联网交流',
              type: '1111',
              color: 'red'
            },
            {
              id: 2,
              name: '江西/赣州',
              type: '1111',
              color: 'green'
            },
          ],
          memberCount: 20,
          maxMemberCount: 200,
          rate: '10',
          memberList: [
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: true,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: true,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
            {
              remark: 'I love reading, traveling and discovering new things. You need to be happy in life.',
              accountNum: '1221221',
              bgImg: 'https://cdn.quasar.dev/img/mountains.jpg',
              phone: '（+86）12345678910',
              from: '江西 赣州',
              img: 'https://cdn.quasar.dev/img/avatar.png',
              lastSendTime: '2020/06/01',
              isAdmin: false,
              name: '徐建',
              nickName: 'nickName',
              imgs: [
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: 'new',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                },
                {
                  id: 1,
                  img: 'https://cdn.quasar.dev/img/avatar.png',
                  name: '',
                  remark: '',
                }
              ],
            },
          ]
        }
      }
    },
    methods: {
      _recorder () {
        if (window.location.host.indexOf('localhost') > -1) {
          this.$q.dialog({
            component: Recorder,
            // 如果要访问自定义组件中的
            // 路由管理器、Vuex存储等,
            // 则为可选：
            parent: this, // 成为该Vue节点的子元素
                          // （“this”指向您的Vue组件）
                          // （此属性在<1.1.0中称为“root”
                          //  仍然可以使用，但建议切换到
                          //  更合适的“parent”名称）
            // （上述“component”和“parent”属性除外）：
          })

        } else {
          this.$q.dialog({
            title: 'Error',
            message: '对不起，当前为HTTP环境，无法调用浏览器麦克风权限！'
          }).onOk(() => {

          }).onCancel(() => {
          }).onDismiss(() => {
          })
        }
      },
      _checkFile (files) {
        // eslint-disable-next-line no-debugger
        // debugger
        let notice = ''
        files.forEach(file => {
          if (file.size > 1024 * 1000 ) {
            notice = notice + '’' + file.name + '’'
          }
        })
        if (notice) {
          notice = notice + '大于1M，不能发送'
          this.$q.notify({
            position: 'top',
            message: notice,
            color: 'red',
            timeout: 1000
          })
        } else {
          return files
        }

      },
      _sendFileOver (e) {//"消息类型int类型(0:text、1:image、2:voice、3:video、4:music、5:news、6:file)"
        if (e) {
          const resEntity = JSON.parse(e.xhr.response)
          resEntity.data.forEach(res => {
            let content = {
              url: res.url,
              fileName: res.fileName,
            }
            let msgType = this.uploadFileOrImg === 'img' ? 1 : 6
            if (content.fileName.indexOf(".mp4") > -1//判断是否为视频文件
              || content.fileName.indexOf(".mp4") > -1
              || content.fileName.indexOf(".mov") > -1
              || content.fileName.indexOf(".3GP") > -1
              || content.fileName.indexOf(".rm") > -1
            ) {
              msgType = 3
            }
            // const j_im_send_req = {
            //   chatType: 1,
            //   cmd: 11,
            //   content: JSON.stringify(content),
            //   createTime: new Date().getMilliseconds(),
            //   from: localStorage.getItem('imUserName'),
            //   group_id: localStorage.getItem('chatGroupId'),
            //   msgType: msgType
            // }

            this.doSendMsg(JSON.stringify(content), msgType)
            this.uploadFileDialog = false
          })
        }
      },
      atMember (e) {
        let msg = `<span class="text-blue text-subtitle2" data="${e.accountNum}" contenteditable="false" >&nbsp;@${e.name}&nbsp;</span>`
        this.message = this.message + msg
        this.msgInputHtml = this.msgInputHtml + msg
      },
      atMemberAll () {
        let msg = '<span class="text-blue text-subtitle2" data="-1" contenteditable="false" >&nbsp;@全体&nbsp;</span>'
        this.message = this.message + msg
        this.msgInputHtml = this.message
      },
      changeText (e) {
        this.message = e.currentTarget.innerHTML
        if (!e.data) {
          this.msgInputHtml = e.currentTarget.innerHTML
        }
        /**
         * 防止对富文本框产生影响
         */
        if (!this.bigEditPopShow) {
          let that_ = this
          setTimeout(function () {
            that_.keepLastIndex(that_.$refs['msgInput'])
          }, 5)
        }

      },
      keepLastIndex (obj) {//控制div光标始终在最后面
        if (window.getSelection) {//ie11 10 9 ff safari
          obj.focus(); //解决ff不获取焦点无法定位问题
          var range = window.getSelection();//创建range
          range.selectAllChildren(obj);//range 选择obj下所有子内容
          range.collapseToEnd();//光标移至最后
        } else if (document.selection) {//ie10 9 8 7 6 5
          var range2 = document.selection.createRange();//创建选择对象
          //var range = document.body.createTextRange();
          range2.moveToElementText(obj);//range定位到obj
          range2.collapse(false);//光标移至最后
          range2.select();
        }
      },
      onSendTextMsgEnter (event) {
        if (!event.shiftKey && event.keyCode == 13 && !this.bigEditPopShow && this.message) {
          event.cancelBubble = true
          event.preventDefault()
          event.stopPropagation()
          this.onSendTextMsg()
        }
      },
      doSendMsg (message, msgType) {
        let j_im_send_req = ''
        let chatHisId = ImStorage.getImStorage('chatHisId')
        if (!chatHisId) {
          j_im_send_req = {
            chatType: 1,
            cmd: 11,
            content: message,
            createTime: new Date().getTime(),
            from: localStorage.getItem('imUserName'),
            group_id: localStorage.getItem('chatGroupId'),
            msgType: msgType
          }
        } else {
          j_im_send_req = {
            chatType: 2,
            cmd: 11,
            content: message,
            createTime: new Date().getTime(),
            to: JSON.parse(chatHisId),
            from: localStorage.getItem('imUserName'),
            msgType: msgType
          }
        }

        const returnState = JIM.send(JSON.stringify(j_im_send_req))
        if (returnState && chatHisId) {//私聊的话要把消息自己放到缓存里
          j_im_send_req.id = new Date().getTime()
          this.$store.commit('updateMsg', {
            data: j_im_send_req
          })
        }
      },
      onSendTextMsg: function () {
        if (this.message) {
          const message = this.message
          this.doSendMsg(message, 0)
          // this.bigEditPopShow = false
          this.message = ''
          this.$refs['msgInput'].innerHTML = ''
          if (this.bigEditPopShow) {
            this.$q.notify({
              position: 'center',
              message: '发送成功',
              color: 'green',
              timeout: 1000
            })
          }
        }
      },
      showEmoji () {
        this.$refs.emojiBox.showEmoji()
      },
      showEditPop () {
        this.bigEditPopShow = !this.bigEditPopShow
      },
      selectEmoji (v) {
        this.$data.message = v
        if (!this.bigEditPopShow) {
          this.msgInputHtml = v
          let that_ = this
          setTimeout(function () {
            that_.keepLastIndex(that_.$refs['msgInput'])
          }, 5)
        } else {
          let that_ = this
          setTimeout(function () {
            that_.$refs['edit'].focus()
          }, 5)
        }
      },
      onPickFile () {
        this.uploadFileOrImg = 'img'
        this.uploadFileDialog = !this.uploadFileDialog
      },
      showUploadFile () {
        this.uploadFileOrImg = 'file'
        this.uploadFileDialog = !this.uploadFileDialog
      },
      pasteCapture (evt) {//处理纯文本粘贴
        let text, onPasteStripFormattingIEPaste
        evt.preventDefault()
        if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
          text = evt.originalEvent.clipboardData.getData('text/plain')
          this.$refs['edit'].runCmd('insertText', text)
        } else if (evt.clipboardData && evt.clipboardData.getData) {
          text = evt.clipboardData.getData('text/plain')
          this.$refs['edit'].runCmd('insertText', text)
        } else if (window.clipboardData && window.clipboardData.getData) {
          if (!onPasteStripFormattingIEPaste) {
            onPasteStripFormattingIEPaste = true
            this.$refs['edit'].runCmd('ms-pasteTextOnly', text)
          }
          onPasteStripFormattingIEPaste = false
        }
      },
    },
  }
</script>

<style scoped>
    .im-MsgInput {
        width: 100%;
        max-height: 60px;
        padding: 5px;
        text-align: left;
        overflow: hidden;
        outline: none;
    }

    .im-MsgInput:empty::before {
        color: grey;
        content: attr(placeholder);
    }
</style>
